<template>
  <view class="content" style="background:#fff;padding-left:30px;padding-right:30px">
    <uni-forms ref="form" validateTrigger="bind" v-model="userInfo" :rules="rules" @submit="submit">
      <view class="custom-image-box">
        <text class="text">选择头像</text>
        <uni-file-picker
          v-model="avatarObject"
          style="margin:0 3px"
          limit="1"
          :auto-upload="false"
          :del-icon="false"
          disable-preview
          :imageStyles="imageStyles"
          file-mediatype="image"
          @select="handleSelected"
        >选择</uni-file-picker>
      </view>
      <uni-forms-item required label="昵称" name="userName" labelWidth="100">
        <input class="uni-input-border" v-model="userInfo.userName" type="text" placeholder="请输入昵称" />
      </uni-forms-item>

      <uni-forms-item label="手机号" name="phone" labelWidth="100">
        <input class="uni-input-border" v-model="userInfo.phone" type="text" placeholder="请输入手机号" />
      </uni-forms-item>

      <uni-forms-item label="邮箱" name="email" labelWidth="100">
        <input class="uni-input-border" v-model="userInfo.email" type="text" placeholder="请输入邮箱" />
      </uni-forms-item>

      <view class="uni-button-group pointer">
        <button class="uni-button uni-button-full" type="primary" @click="submitForm">保存</button>
      </view>
    </uni-forms>
  </view>
</template>

<script>
import { image2Base64 } from '@/common/utils.js'
import { apiUpdateUserInfo } from '@/api/userInfo.js'

export default {
  data() {
    return {
      avatarObject: {},
      avatarPath: '',
      userInfo: {
        avatar: '',
        userName: '',
        phone: '',
        email: ''
      },
      imageStyles: {
        width: 80,
        height: 80,
        border: {
          radius: '50%'
        }
      },
      rules: {}
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
    if (this.userInfo.avatar) {
      this.avatarObject = {
        name: 'avatar.png',
        extname: 'png',
        url: this.userInfo.avatar
      }
    }
  },
  methods: {
    handleSelected(e) {
      this.avatarPath = e.tempFilePaths[0]
    },
    submitForm() {
      image2Base64(this.avatarPath).then(res => {
        this.userInfo.avatar = res
        apiUpdateUserInfo(this.userInfo)
          .then(() => {
            uni.showToast({
              icon: 'success',
              title: '修改成功',
              success() {
                setTimeout(function () {
                  uni.reLaunch({ url: '../main/main?refresh=true' })
                }, 1500)
              }
            })
          })
          .catch(err => {
            uni.showToast({
              icon: 'error',
              title: err
            })
          })
      })
    }
  }
}
</script>

<style>
.custom-image-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 15px;
}
.text {
  font-size: 14px;
  color: #333;
}

.uni-group {
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
}

/* 容器 */
.uni-container {
  padding: 15px;
  box-sizing: border-box;
}

/* 按钮样式 */
.uni-button-group {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pointer {
  cursor: pointer;
}

.uni-input-border,
.uni-textarea-border {
  width: 100%;
  font-size: 14px;
  color: #666;
  border: 1px #e5e5e5 solid;
  border-radius: 5px;
  box-sizing: border-box;
}

.uni-input-border {
  padding: 0 10px;
  height: 35px;
}

.uni-icon-password-eye {
  position: absolute;
  right: 8px;
  top: 6px;
  font-family: uniicons;
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #999999;
}

.uni-eye-active {
  color: #007aff;
}

.uni-button {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  line-height: 1;
  margin: 0;
  box-sizing: border-box;
  overflow: initial;
}

.uni-button-full {
  width: 100%;
}
</style>
